import React, { useEffect, useState } from 'react';
import * as service from '../../../api/Statistics'
import './Style/DataService.scss'
import { DatePicker, Space, Table, Button, Card, Select } from 'antd';
import { Column } from '@ant-design/plots';
import { SearchOutlined } from '@ant-design/icons';
import ExportJsonExcel from "js-export-excel"

interface Props {

}
const { RangePicker } = DatePicker;

function StatService(props: Props) {
    const [loading, setLoading] = useState(false);
    const [listerone, setListerone] = useState([])
    const [listertwo, setListertwo] = useState([])
    const [listerthree, setListerthree] = useState([])
    const [data, setData] = useState([]);
    var [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 30 });

    useEffect(() => {
        setLoading(true);

        // datafw  服务包使用情况  
        service.datafw().then((res) => {
            console.log(res);
            setData(res.data.data)
            // var arr =res.data.data.map((item:any) => {
            //     return {
            //         key:item.date
            //     }
            // })
            // setSign(arr)
            setPagination({
                ...pagination,
                total: res.data.data.length
            })
            setLoading(false);
        })

        service.optionlist().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.mechanismName, label: item.mechanismName }
            })
            setListerone(arr)
        })
        service.teamlist().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.teamName, label: item.teamName }
            })
            setListertwo(arr)
        })
        service.teamlistwo().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.doctorName, label: item.doctorName }
            })
            setListerthree(arr)
        })
    }, [])
    const handleChange = (pagi: any) => {
        setPagination(pagi);//更新页码
    }

    //监听下拉框数据
    const handle = () => {
        // console.log(value);
        service.sever_search({  }).then((res) => {
            console.log(res)
            setData(res.data.data)
        })
    };
  // 导出
  let excel = () => {//导出Excel表
    let sheetFilter = ["year", "value", ]//需要导出的属性，一般列表数据的属性
    let option = { fileName: "", datas: [{}] };
    option.fileName = "服务业绩";
    option.datas = [
        {
            sheetData: data,//需要导出的数据
            sheetName: "服务业绩",
            sheetFilter: sheetFilter,
            sheetHeader: ["数据类型", "服务量",],//每一列的列头
            columnWidth: [20, 20, 20, 20],//每一列的宽
        }
    ]
    let toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
}

    const columns = [
        {
            title: '序号',
            render: (_: any, record: never) => <a>{data.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '数据类型',
            dataIndex: 'year',
            key: 'year',
        },
        {
            title: '服务量',
            dataIndex: 'value',
            key: 'value',
        }
    ]

    const config = {
        data,
        xField: 'year',
        yField: 'value',
        xAxis: {
            label: {
                autoHide: true,
                autoRotate: false,
            },
        },
        meta: {
            value: {
                alias: '服务量',
            },
        },
        minColumnWidth: 20,
        maxColumnWidth: 20,
    };

    return (
        <div className='data-service' style={{ padding: 20 }} >
            <div className='title'>服务业绩统计</div>

            <div className='top'>
                <div className='padding'>
                    <span>机构</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="全部"
                        style={{ width: 160 }}
                        // onChange={handleChangeorang}
                        options={
                            listerone
                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生团队</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        // onChange={doctorts}
                        options={
                            listertwo
                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        // onChange={doctor}
                        options={
                            listerthree
                        }
                    />
                </div>
                <div className="but" >
                <Button type="primary" icon={<SearchOutlined />} onClick={() => { handle()}}>
                    搜索
                </Button>
                </div>
                
            </div>
            <div style={{ padding: "0 100px" }}>
                <Card title="服务量统计" bordered={false}>
                    <Column {...config} />
                </Card>
            </div>

            <Button  onClick={() => { excel() }} style={{ float: 'right', margin: '10px 0' }}>导出</Button>
            <Table columns={columns} dataSource={data} loading={loading} pagination={pagination}
                onChange={(pagi) => { handleChange(pagi) }}  rowKey={(row: any) => row.date}
            />
        </div>
    );
}
export default StatService;